<template>
  <button @click="showComponent = MyLeft">展示MyLeft组件</button>
  <button @click="showComponent = MyRight">展示MyRight组件</button>
  <div>
    <!-- 使用组件缓存 -->
    <keep-alive>
      <component :is="showComponent"></component>
    </keep-alive>
  </div>
</template>
<script setup>
  import MyLeft from "./test/left.vue";
  import MyRight from "./test/right.vue";
  import { shallowRef } from "vue";
  const showComponent = shallowRef(MyLeft);
  //非响应式数据不可以
  // let showComponent = "MyLeft";

</script>